<template>
 <div>
    <div class="search-con search-con-top">
      <div class="fl">
        <Input clearable placeholder="输入会员名称搜索" class="search-input" v-model.trim="search.nickname"/>
        <Input clearable placeholder="输入商品名称搜索" class="search-input" v-model.trim="search.gname"/>
        <Button class="search-btn" type="primary" @click="getOrserList">搜索</Button>
      </div>
    </div>
    <tables ref="tables" editable :border="true" v-model="tableData" :columns="columns" :page="page" @pageSize="pageSize" @pageNum="pageNum"/>
 </div>
</template>

<script>
import Tables from "_c/tables";
import { userOrderL ,userOrderS } from "@/api/data";

 export default {
   data () {
     return {
       tableData:[],
       columns:[
            {
                type: "index",
                width: 60,
                align: "center",
                key: ""
            },
            {
                title: "商品名称",
                key: "gname"
            },
            {
                title: "下单时间",
                key: "createtm"
            },
            {
                title: "客户名称",
                key: "nickname"
            },
            {
                title: "客户地址",
                key: "address"
            },
            {
                title: "价格 （充值金）",
                key: "usemoney"
            },
            {
                title: "状态",
                key: "status",
                render:(h,params)=>{
                    let text = ''
                    switch (params.row.status) {
                        case 1:
                            text = '已支付'
                            break;
                        case 2:
                            text = '已配送'
                            break;
                        default:
                            break;
                    }
                    return h('div',text)
                }
            },
            {
                title: '操作',
                key: 'handle',
                // minWidth:20,
                button: [
                        (h, params, vm) => {
                            let btn = h(
                            "Button",
                            {
                                props: {
                                type: "primary",
                                size: "small"
                                },
                                style: {
                                marginRight: "5px"
                                },
                                on: {
                                click: () => {
                                    this.changeStatus(params.row.id)
                                }
                                }
                            },
                            "已配送"
                            )
                            if(params.row.status == 2){
                                btn = ''
                            }
                        return [ btn ];
                        }
                    ]
            }
       ],
       page:{
            current: 1,
            total: 0,
            pageSize: 10
       },
       search:{
        //    nickname:'',
        //    gname:''
       }
     }
   },
   methods: {
     pageSize(value){
        this.page.pageSize = value
        this.page.current = 1
        this.getOrserList()
     },
     pageNum(value){
        this.page.current = value
        this.getOrserList()
     },
     getOrserList(){
         let options = {
            nickname:this.search.nickname,
            gname:this.search.gname,
            pageNum:this.page.current,
            pageSize:this.page.pageSize
         }
         userOrderL(options).then(res=>{
             if(res.code == 1){
                 this.tableData = res.data.data
                 this.page.total = res.data.total
             }
         })
     },
     changeStatus(id){
         userOrderS({
             id:id,
             status:'2'
         }).then(res=>{
             if(res.code == 1){
                this.getOrserList()
             }
         })
     }
   },
   mounted() {
       this.getOrserList()
   },
   components: {
      tables: Tables
   }
 }
</script>

<style>


</style>
